import React, { Component } from 'react';
import { Button, DatePicker } from 'antd'
import moment from 'moment';
import './index.scss'

const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
  
class MyComponent extends Component {
    state = {
        btnList:this.props.btnList,
        activeIndex:0,
        startTime:undefined,//开始时间
        endTime:undefined,  //结束时间
        callBackData:{
            range:"",
            beginTime:"",
            endTime:"",
        }
    }

    handleBtnClick = (key,index)=>{
        console.log(key)   
        this.setState({
            startTime:undefined,//开始时间
            endTime:undefined,  //结束时间            
            activeIndex:index,
            callBackData:{
                range:key,
                beginTime:"",
                endTime:"",                
            }
        },()=>{
            this.props.onDataChange(this.state.callBackData);
        })        
    }
    handleDateChange = (date, dateString) =>{
        this.setState({
            activeIndex:null,
            startTime:dateString[0],
            endTime:dateString[1],
            callBackData:{
                range:"",
                beginTime:dateString[0]?dateString[0]+' 00:00:00':"",
                endTime:dateString[1]?dateString[1]+' 23:59:59':"",                
            }
        },()=>{
            this.props.onDataChange(this.state.callBackData);
        })        
    }
    
    render() {
        const state = this.state;
        return (
            <div className="dateChooseBox">
                {
                    state.btnList.map((item,index)=>(
                        <Button key={index} className={["mr10",this.state.activeIndex==index&&"btnActive"].join(" ")} onClick={()=>{this.handleBtnClick(item.key,index)}}>{ item.name }</Button> 
                    ))
                }
                <RangePicker 
                    value={this.state.startTime===undefined||this.state.endTime===undefined||this.state.startTime===""||this.state.endTime===""?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}
                    onChange={this.handleDateChange}
                />
            </div>
        )
    }
}
export default MyComponent;